<template>
  <div class="data-table-container">
    <el-table :header-cell-style="{ background: '#000C34', color: '#C0C4CC' }"
              :data="filteredData"
              :cell-style="{ background: '#000C34', color: '#C0C4CC' }"
              style=" background-color: #000C34;
               width: 100%" border>
      <el-table-column v-if="false" prop="seq" label="" width="180"/>
      <el-table-column prop="time" label="时间"  />
      <el-table-column prop="sensor" label="传感器" />
      <el-table-column prop="value" label="监测值" />
    </el-table>
    <div class="pagination-container">
      <span class="pagination-info">共 {{ total }} 条记录 第 {{ currentPage }} / {{ totalPages }} 页</span>
      <el-button-group>
        <el-button class="pagination-button" @click="handleCurrentChange(1)" :disabled="currentPage === 1">首页</el-button>
        <el-button class="pagination-button" @click="handleCurrentChange(currentPage - 1)" :disabled="currentPage === 1">上一页</el-button>
        <el-button class="pagination-button" @click="handleCurrentChange(currentPage + 1)" :disabled="currentPage === totalPages">下一页</el-button>
        <el-button class="pagination-button" @click="handleCurrentChange(totalPages)" :disabled="currentPage === totalPages">尾页</el-button>
      </el-button-group>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    filteredData: Array,
    currentPage: Number,
    pageSize: Number,
    total: Number,
    totalPages: Number,
  },
  methods: {
    handleCurrentChange(page) {
      if (page > 0 && page <= this.totalPages) {
        this.$emit('current-change', page);
      }
    }
  }
};
</script>

<style scoped>
/* 表格容器样式 */
.data-table-container {
  background-color: #000C34; /* 背景颜色与页面一致 */
  padding: 20px;
  color: #FFFFFF; /* 文字颜色 */
}

/* 表格整体样式 */
.el-table {
  background-color: #000C34; /* 表格背景颜色 */
  color: #cf3434; /* 表格文字颜色 */
  border-color: #C0C4CC; /* 表格分割线颜色 */
  height: 320px;
}

/* 表头样式 */
.el-table thead {
  background-color: #000C34 !important; /* 表头背景颜色 */
  color: #C0C4CC !important; /* 表头文字颜色 */
}

/* 表头单元格样式 */
.el-table th {
  background-color: #000C34 !important; /* 表头背景颜色 */
  color: #C0C4CC !important; /* 表头文字颜色 */
  border-bottom: 1px solid #C0C4CC; /* 表头下边框颜色 */
}

/* 表格单元格样式 */
.el-table td {
  border-bottom: 1px solid #C0C4CC; /* 单元格下边框颜色 */
  border-right: 1px solid #C0C4CC; /* 单元格右边框颜色 */
}

.el-table td:last-child {
  border-right: none; /* 最后一列去掉右边框 */
}


/* 分页容器样式 */
.pagination-container {
  display: flex;
  justify-content: flex-end; /* 将内容靠右对齐 */
  align-items: center;
  gap: 10px; /* 间距 */
  margin-top: 20px;
  color: #FFFFFF; /* 分页信息文字颜色 */
}

/* 分页按钮样式 */
.pagination-button {
  background-color: #000C34;
  border: 1px solid #C0C4CC;
  color: #C0C4CC;
}

.pagination-button:hover {
  background-color: #3A7FF0; /* 鼠标悬停时的按钮背景颜色 */
  border-color: #3A7FF0;
  color: #FFFFFF; /* 鼠标悬停时的按钮文字颜色 */
}

.pagination-button.is-disabled {
  background-color: #000C34; /* 禁用按钮背景颜色 */
  color: #A0A7C3; /* 禁用按钮文字颜色 */
  opacity: 0.5;
}
</style>
